<script lang="ts" module>
    export const BreadcrumbContextKey = Symbol("BreadcrumbContextKey");
</script>

<script lang="ts">
    import { setContext } from "svelte";
    import { useClassList } from "../utils/useClassList";
    import type { BreadcrumbProps, BreadcrumbPropsContext } from "./Breadcrumb";

    const props: BreadcrumbProps = $props();

    const classList = $derived(
        useClassList(props, "cm-breadcrumb", {
            "cm-breadcrumb-hover": props.hover,
        })
    );

    setContext(BreadcrumbContextKey, {
        separator: props.separator ?? "/",
    } as BreadcrumbPropsContext);
</script>

<div class={classList} style={props.style}>
    {@render props.children?.()}
</div>
